<template>
  <div class="content">
    <van-nav-bar title="美食" style="background-color: #FFD85F;" class="headera">
      <template #right>
        <van-icon name="plus" size="18" color="#f00" />
      </template>
    </van-nav-bar>

    <!-- 搜索框 -->
    <van-search v-model="search" shape="round" background="#FFD85F" placeholder="请输入搜索关键词" @click="searcha" readonly />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="200">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="item.url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="home-container">
      <!-- 首页 - 网格导航 -->
      <van-grid :border="false" class="custom-grid">
        <div class="grid-item" v-for="(item, index) in categories" :key="index" @click="goToCategory(index)">
          <img :src="item.iconUrl" alt="" />
          <span>{{ item.name }}</span>
        </div>
        <div class="grid-item">
          <img src="/images/gengduo.png" />
          <span>更多</span>
        </div>
      </van-grid>

      <!-- 推荐食谱部分 -->

      <section class="recommendations">
        <h2>推荐食谱</h2>
        <div class="recipe-list">
          <div v-for="recipe in recommendedRecipes" :key="recipe.id" class="recipe-card">
            <img :src="recipe.imageUrl" alt="食谱图片" />
            <h3>{{ recipe.recipeName }}</h3>
            <p>{{ recipe.description }}</p>
            <p><strong>卡路里：</strong> {{ recipe.calories }} kcal</p>
            <button @click="viewRecipe(recipe.id)">查看食谱</button>
          </div>
        </div>
      </section>

      <!-- 食谱列表 -->

      <section class="recommendations">
        <h2>食谱列表</h2>
        <div class="recipe-list">
          <div v-for="recipe in goodsList" :key="recipe.id" class="recipe-card">
            <img :src="recipe.imageUrl" alt="食谱图片" />
            <h3>{{ recipe.recipeName }}</h3>
            <p>{{ recipe.description }}</p>
            <p><strong>卡路里：</strong> {{ recipe.calories }} kcal</p>
            <button @click="viewRecipe(recipe.id)">查看食谱</button>
          </div>
        </div>
      </section>
      <van-divider v-if="!hasNexPage">还拉？收你来了</van-divider>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      search: '',
      categories: [],
      images: [],
      recommendedRecipes: [],
      goodsList: [],
      page: 1,
      limit: 20,
      hasNexPage: true
    };
  },
  methods: {
    goToCategory(index) {
      this.$router.push({ name: 'Category', params: { categoryIndex: index } });

    },
    viewRecipe(recipeId) {
      this.$router.push({ name: 'FoodDetails', params: { id: recipeId } });
    },
    searcha() {
      this.$router.push({
        name: "search"
      })
    },

    loadMore() {
      console.log("加载")
    }

  },
  mounted() {
    window.onscroll = () => {
      //页面滚动距离
      const sT = document.documentElement.scrollTop

      //窗口高度
      const cH = document.documentElement.clientHeight
      //页面总高度
      const sH = document.documentElement.scrollHeight

      if (this.hasNexPage) {
        if (sH === parseInt(sT + cH)) {
          this.page += 1
          axios({
            url: `http://localhost:8081/wx/recipes/list?page=${this.page}&limit=${this.limit}`,
          }).then(res => {
            if (res.data.data.list.length < this.limit) {
              this.hasNexPage = false
            }
            this.goodsList = this.goodsList.concat(res.data.data.list)
          })
        }
      }

    }
  },
  created() {

    axios({
      url: "http://localhost:8081/wx/home/index"
    }).then(res => {

      this.images = res.data.data.banner
      this.categories = res.data.data.channel
    })
    axios({
      url: "http://localhost:8081/wx/recommendations",
      headers: {
        token: localStorage.getItem("token")
      }
    }).then(res => {

      this.recommendedRecipes = res.data
    })
    axios({
      url: "http://localhost:8081/wx/recipes/list",
      params: {
        page: 1,
        limit: 20
      }
    }).then(res => {
      this.goodsList = res.data.data.list
    })
  }
};
</script>

<style lang="scss">
.custom-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  text-align: center;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.grid-item img {
  width: 50px;
  height: 50px;
}

.grid-item span {
  margin-top: 5px;
  font-size: 14px;
  color: #333;
}


.headera {
  .van-nav-bar__title {
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
  }
}

/* 轮播图样式 */
.my-swipe img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* 主容器背景色 */
.home-container {
  padding: 20px;
  padding-bottom: 80px;
  /* 添加底部填充以防止内容被遮挡 */
  background-color: #FFF7E1;
  color: #4B3F30;
  font-family: Arial, sans-serif;
}

/* 修复底部导航遮挡问题的额外样式 */
.van-tabbar {
  position: fixed;
  /* 固定在底部 */
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* 确保在最前层 */
}


/* 推荐食谱部分标题样式 */
.recommendations h2 {
  color: #D89A38;
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 推荐食谱卡片样式 */
.recipe-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;

  justify-content: space-between;
}

.recipe-card {
  width: calc(50% - 40px);
  padding: 15px;
  border: 1px solid #D1A348;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff2c1, #ffe79d);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), -4px -4px 8px rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

.recipe-card:hover {
  transform: scale(1.05);
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.7);
}

.recipe-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  margin-bottom: 10px;
}

.recipe-card h3 {
  color: #D89A38;
  font-size: 1.3em;
  margin: 8px 0 5px;
  font-weight: bold;
}

.recipe-card p {
  color: #4B3F30;
  font-size: 0.9em;
  margin: 5px 0;
}

/* 按钮样式 */
button {
  background-color: #D89A38;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

button:hover {
  background-color: #B77A24;
  transform: translateY(-2px);
}
</style>
